<template>
  <section class="main">
    <section class="socket">
      <div class="from">
        <div class="socketLeft">
            <p class="title">用户列表</p>
            <ul>
              <li :class="{active:item.start}" v-for="item in userList" @click="tabData(item)">{{item.user.username}} <span v-if="item.is_see==1">有新消息</span></li>
            </ul>
        </div>
        <div class="socketRight">
            <p class="title">聊天窗口</p>
            <vloading class="socketLoad" v-if='loadStart'></vloading>
            <div class="getBox" v-if='!loadStart'>
              <ul>
                <li v-for="item in listData" :class="{right:item.admin_id==1}">
                  <p class="time" v-if="item.admin_id==2">客服 ,<span> {{item.created_at}}</span></p>
                  <p class="time" v-if="item.admin_id==0">{{item.user.username}} ,<span> {{item.created_at}}</span></p>
                  <p class="info">{{item.msg}}</p>
                </li>

              </ul>
            </div>
            <div class="postBox">
              <textarea v-model="postList"></textarea>
              <button @click="postSock">ENTER</button>
            </div>
        </div>
        
      </div>
    </section>
  </section>
</template>
<script>
import vloading from '@/components/loading.vue'
import axios from 'axios'
import {Get,Post} from '@/config/api.js'
export default {
  name: 'order',
  data() {
    return {
      loadStart: false,
      getList:[],
      postList:'',
      aa:'',
      user_id:1,
      user_name:'',
      userList:'',
      listData:'',
      date: []
    }
  },
  mounted() {
    this.getSock()
    this.mkSet()
  },
  beforeDestroy(){
    this.clSet()
  },
  components:{
    vloading
  },
/*  filters:{
    name(val){
      let name=this.getName(val)
      return name
    }
  },*/
  methods: {
    mkSet(){
        let that=this
        this.aa=setInterval(function(){
          that.getSock()
          that.userData(that.user_id)
        },20000)
    },
    clSet(){
        clearInterval(this.aa)
    },
    //获取用户名字
/*    async getName(val){
      let reg=await Get('/users/'+val,this.$store.state.token)
      console.log(reg)

    },*/
    //请求数据
    async getSock() {
      if (this.Check()) {
        let reg =await Get('/message',this.$store.state.token)
        console.log(reg)
        this.userList=reg.data
        let that=this
        this.userList.forEach(function (value) {
            that.$set(value,'start',false);
        });
      }
    },
    //请求单人信息
    async userData(val) {
      if (this.Check()) {
        this.user_id=val
        let reg =await Get('/message/user/'+val,this.$store.state.token)
        console.log(reg)
        //this.user_name=reg.data.user.username
        this.listData=reg.data.reverse()
      }
    },
    //切换用户
    tabData(val){
      let that=this
      this.user_id=val.user_id
      this.userData(this.user_id)
      this.userList.forEach(function (value) {
          that.$set(value,'start',false);
      });
      val.start=true
    },
    //发送数据
    async postSock(){
      if(this.postList!=''){
        if (this.Check()) {
          let data={
            "msg":this.postList,
            "user_id":this.user_id
          }
          let reg =await Post('/message/send',this.$store.state.token,data)
          this.postList=''
          this.userData(this.user_id)
        }
      }
    }
  }
}

</script>
